<script setup lang="ts">
defineProps<{
  expanded: boolean;
}>();

const emit = defineEmits<{
  (e: 'toggleSidebar'): void;
}>();

const toggle = () => {
  emit('toggleSidebar');
};
</script>

<template>
  <header class="bg-white shadow-sm p-4 flex justify-between items-center bg-opacity-60 backdrop-blur"
          style="box-shadow: 0 2px 4px rgba(173, 216, 230, 0.3);">
    <button @click="toggle" class="flex justify-center items-center gap-x-3 size-8 text-sm text-gray-600
    hover:bg-gray-100 rounded-full
    disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100
    dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700
    dark:hover:text-neutral-200 dark:focus:text-neutral-200">
      <svg v-if="expanded"
           class="shrink-0 size-4 w-5 h-5" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect width="18" height="18" x="3" y="3" rx="2"/>
        <path d="M15 3v18"/>
        <path d="m10 15-3-3 3-3"/>
      </svg>
      <svg v-else
           class="shrink-0 size-4 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect width="18" height="18" x="3" y="3" rx="2"/>
        <path d="M15 3v18"/>
        <path d="m8 9 3 3-3 3"/>
      </svg>
    </button>
    <div class="flex items-center space-x-4">
      <span class="text-gray-700">👤 Admin</span>
    </div>
  </header>
</template>

<style scoped>

</style>